<template>
  <div class="fundodoo-center">
    <el-image :src="imgUrl" fit="scale-down" :lazy="true" style="width: 100px; height: 100px">
      <div slot="placeholder" class="fundodoo-image-slot fundodoo-center">
        <div class="fundodoo-img">
          <i class="el-icon-loading" />
        </div>
        <div class="fundodoo-desc">
          <span class="fundodoo-desc-text">技术支持</span>
        </div>
      </div>
      <div slot="error" class="fundodoo-image-slot fundodoo-center">
        <div class="fundodoo-img">
          <i class="el-icon-picture-outline" />
        </div>
        <div class="fundodoo-desc">
          <span class="fundodoo-desc-text">技术支持</span>
        </div>
      </div>
    </el-image>
  </div>
</template>

<script>

export default {
  name: 'GoodsImage',
  components: {

  },
  props: {
    url: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      imgUrl: ''
    }
  },
  created() {

  },
  mounted() {

  },
  beforeMount() {
    this.getImgUrl()
  },
  methods: {
    getImgUrl() {
      this.$nextTick(() => {
        this.imgUrl = this.url
      })
    }
  }
}

</script>

<style scoped>
 .fundodoo-image-slot {
    display: flex;
    flex-direction: column;
  }
  .fundodoo-img {
    line-height: 10px;
  }
  .fundodoo-desc {
    line-height: 12px;
  }
</style>
